<template>
	<view>
		<u-navbar title="设备详情" @rightClick="rightClick" :placeholder="true" :autoBack="true" leftIconSize="23"
			bgColor="#F2F2F2">
			<view class="u-nav-slot right" slot="right">
				<image src="../../static/compile.png" mode=""></image>
			</view>
		</u-navbar>
		<view class="details">
			<view class="details_top flex-between">
				<view class="">设备SN</view>
				<image src="../../static/Fromabove.png" mode=""></image>
			</view>
			<view class="details_text flex">
				<view class="type">在线</view>
				<view class="name"><u--text size='18' :lines="1" text="32_HH_CAB7FF5F3B46…"></u--text></view>
				<image src="../../static/wallet/copy.png" @click="copy()" mode=""></image>
			</view>
			<view class="remak">备注</view>
			<view class="remaktext">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</view>
		</view>
		<view class="sel_time flex-between">
			<view class="">2024-01-13</view>
			<view class="">至</view>
			<view class="">2024-01-13</view>
		</view>
		<view class="detailtab">
			<u-tabs style="background-color: #FFFFFF;width: 496rpx;" :list="list1" :scrollable='false' :inactiveStyle="{
				color: '#999999'}" :activeStyle="{
					color: '#333333',
					fontWeight: 'bold'
			}" lineColor="#9999FF" lineWidth="18" lineHeight="4" @click="click"></u-tabs>
		</view>
		<view class="charts-box_mt">
			<view class="isname flex-between">
				<view class="">上下行宽带 <span>Gbps</span></view>
				<view class="right flex">
					<view class="flex"><text class="text1"></text> 上行</view>
					<view class="flex"><text class="text2"></text> 下行</view>
				</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts v-if="this.lineData.data" type="line" :opts="opts" :chartData="chartData" />
				<noneDate v-else></noneDate>
			</view>
		</view>
		<view class="charts-box_mt">
			<view class="isname flex-between">
				<view class="">CPU利用率<span class="span1">12%</span></view>
				<view class="">CPU:4核</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts v-if="this.lineData.data" type="area" :opts="opts1" :chartData="chartData1" />
				<noneDate v-else></noneDate>
			</view>
		</view>
		<view class="charts-box_mt">
			<view class="isname flex-between">
				<view class="">内存利用率<span class="span1">12%</span></view>
				<view class="">内存:1.91G</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts v-if="this.lineData.data" type="area" :opts="opts2" :chartData="chartData1" />
				<noneDate v-else></noneDate>
			</view>
		</view>
		<view class="charts-box_mt">
			<view class="isname flex-between">
				<view class="pool_bottom">系统盘总量 <span class="span1">113.30</span></view>
			</view>
			<view class="pooldata flex-between">
				<view class="left" style="`width: &{leftwidth}rpx;`">已使用50%</view>
				<view class="right" style="`width: &{rightwidth}rpx;`">剩余50%</view>
			</view>
		</view>
		<view class="butbottom flex-between">
			<view class="butbottom_btn1">重启</view>
			<view class="butbottom_btn2">关机</view>
			<view class="butbottom_btn3">移除设备</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				leftwidth: '',
				rightwidth: '',
				list1: [{
						name: '今天'
					},
					{
						name: '昨天'
					},
					{
						name: '本周'
					},
					{
						name: '本月'
					}
				],
				chartData: {},
				chartData1: {},
				chartData2: {},
				opts: {
					color: ["#5D78FF", "#1FAE4E", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15], // 图位置
					enableScroll: false,
					xAxis: {
						disableGrid: true,
						labelCount: 4, //设置显示个数
						// format: 'formatterTime2'
						fontSize: '9',
						rotateLabel: false, //旋转
						marginTop: '5'
						// rotateAngle:'30'
					},
					fontSize: '10',
					dataLabel: false, // 数据显示
					legend: {
						show: false,
					},
					dataPointShape: false, // 圆点显示
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "curve",
							width: 1,
							activeType: "none",
							onShadow: false
						}
					}
				},
				opts1: {
					color: ["#FF935D", "#1FAE4E", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15], // 图位置
					enableScroll: false,
					xAxis: {
						disableGrid: true,
						labelCount: 4, //设置显示个数
						// format: 'formatterTime2'
						fontSize: '9',
						rotateLabel: false, //旋转
						marginTop: '5'
						// rotateAngle:'30'
					},
					fontSize: '10',
					dataLabel: false, // 数据显示
					legend: {
						show: false,
					},
					dataPointShape: false, // 圆点显示
					yAxis: {
						gridType: "dash",
						dashLength: 2,
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.8,
							addLine: true,
							width: 1,
							gradient: true,
							activeType: "hollow"
						}
					}
				},
				opts2: {
					color: ["#AE5DFF", "#1FAE4E", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15], // 图位置
					enableScroll: false,
					xAxis: {
						disableGrid: true,
						labelCount: 4, //设置显示个数
						// format: 'formatterTime2'
						fontSize: '9',
						rotateLabel: false, //旋转
						marginTop: '5'
						// rotateAngle:'30'
					},
					fontSize: '10',
					dataLabel: false, // 数据显示
					legend: {
						show: false,
					},
					dataPointShape: false, // 圆点显示
					yAxis: {
						gridType: "dash",
						dashLength: 2,
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.8,
							addLine: true,
							width: 1,
							gradient: true,
							activeType: "hollow"
						}
					}
				},
				iconInfo: {

				},
				lineData: {
					data: []
				},
				day: '',
				newDay: '',
				title: ''
			}
		},
		onLoad() {
			this.day = this.$fun.getYMD()
			this.newDay = this.$fun.getYMD()
		},
		onShow() {
			//模拟从服务器获取数据
			this.getServerData()
		},

		methods: {
			rightClick() {
				this.$fun.jump(`./editfacility`)
			},
			click() {

			},
			onUecharts() {
				let res = {
					// categories: this.lineData.date,
					categories: ["02-01", "02-02", "02-03", "02-04", "02-05", "02-06", "02-07", "02-08", "02-09",
						"02-10", "02-11", "02-11", "02-11", "02-11"
					],
					series: [{
						name: "",
						// data: this.lineData.flow
						data: [78.94, 86.71, 85.99, 85.92, 85.99, 86.96, 104.25, 117.8, 117, 116.15, 114.88,
							116.65, 106.49, 118.72
						]
					}, {
						name: "",
						// data: this.lineData.flow
						data: [75.94, 56.71, 85.99, 65.92, 88.99, 86.96, 74.25, 107.8, 117, 115.15, 104.88,
							116.65, 116.49, 187.72
						]
					}, ]
				};
				let res1 = {
					categories: ["02-01", "02-02", "02-03", "02-04", "02-05", "02-06", "02-07", "02-08", "02-09",
						"02-10", "02-11", "02-11", "02-11", "02-11"
					],
					series: [{
						name: "",
						// data: this.lineData.flow
						data: [78.94, 86.71, 85.99, 85.92, 85.99, 86.96, 104.25, 117.8, 117, 116.15, 114.88,
							116.65, 106.49, 118.72
						]
					}]
				}
				let res2 = {
					categories: ["02-01", "02-02", "02-03", "02-04", "02-05", "02-06", "02-07", "02-08", "02-09",
						"02-10", "02-11", "02-11", "02-11", "02-11"
					],
					series: [{
						name: "",
						// data: this.lineData.flow
						data: [78.94, 86.71, 85.99, 85.92, 85.99, 86.96, 104.25, 117.8, 117, 116.15, 114.88,
							116.65, 106.49, 118.72
						]
					}]
				}
				this.chartData = JSON.parse(JSON.stringify(res));
				this.chartData1 = JSON.parse(JSON.stringify(res1));
				this.chartData2 = JSON.parse(JSON.stringify(res2));
			},
			getServerData() {
				let data = []
				this.$fun.ajax.post('butt/incomeList', {
					day: this.day
				}).then(res => {
					console.log(res)
					this.iconInfo = res.data
					// this.lineData = this.$fun.setArr(res.data.kline.date,res.data.kline.flow)
					if (res.data.kline !== undefined) {
						this.lineData = res.data.kline
						// console.log(this.lineData);
						this.onUecharts()
					}
					this.onUecharts()
				})
			},
			copy(text) {
				uni.setClipboardData({
					data: text,
					success: () => {
						this.showToast && uni.$u.toast('复制成功')
					},
					fail: () => {
						this.showToast && uni.$u.toast('复制失败')
					},
					complete: () => {
						// this.showTooltip = false
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.right {
		image {
			width: 42rpx;
			height: 42rpx;
		}
	}

	.details {
		width: 690rpx;
		// height: 268rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 0 auto;
		padding: 30rpx;
		box-sizing: border-box;

		&_top {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;

			image {
				width: 64rpx;
				height: 64rpx;
				margin: -30rpx -30rpx 0 0;
			}
		}

		&_text {
			margin-top: 16rpx;

			.type {
				font-weight: 500;
				font-size: 18rpx;
				color: #FFFFFF;
				width: 56rpx;
				height: 32rpx;
				// line-height: 32rpx;
				text-align: center;
				background: rgba(153, 153, 255, 0.9);
				border-radius: 4rpx;
			}

			.name {
				width: 437rpx;
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
				margin-left: 10rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 30rpx;
			}
		}

		.remak {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			margin-top: 30rpx;
		}

		.remaktext {
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			margin-top: 10rpx;
		}
	}

	.sel_time {
		font-weight: 600;
		font-size: 24rpx;
		color: #333333;
		margin: 30rpx;
	}

	.sel_time :nth-child(1),
	.sel_time :nth-child(3) {
		width: 300rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		text-align: center;
	}

	.detailtab {
		background-color: #FFFFFF;
	}

	.charts-box_mt {
		background-color: #FFFFFF;
		// height: 286rpx;
		padding-bottom: 40rpx;

		.charts-box {
			height: 266rpx;
		}

		.isname {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #333333;
			text-align: left;
			font-style: normal;
			margin-left: 30rpx;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			margin-right: 30rpx;

			span {
				font-weight: 600;
				font-size: 20rpx;
				color: #333333;
			}

			.span1 {
				font-weight: 600;
				font-size: 28rpx;
				color: #FF6262;
			}

			.right {
				text {
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}

				.text1 {
					background: #5D78FF;
				}

				.text2 {
					background: #1FAE4E;
					margin-left: 30rpx;
				}
			}
		}

		.pooldata {
			width: 690rpx;
			height: 60rpx;
			background: #9999FF;
			margin: 0 auto;
			border-radius: 20rpx;
			font-weight: 600;
			font-size: 24rpx;
			color: #FFFFFF;
			// padding: 0 20rpx;
			box-sizing: border-box;

			.left {
				width: 300rpx;
				text-align: left;
				background: #9999FF;
				height: 30px;
				line-height: 30px;
				border-top-left-radius: 24rpx;
				border-bottom-left-radius: 24rpx;
				padding-left: 20rpx;
			}

			.right {
				width: 300rpx;
				text-align: right;
				background: #99CCFF;
				height: 60rpx;
				line-height: 60rpx;
				border-top-right-radius: 24rpx;
				border-bottom-right-radius: 24rpx;
				padding-right: 20rpx;
			}
		}
	}

	.butbottom {
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		margin: 16rpx 30rpx;
		padding-bottom: 16rpx;

		&_btn1 {
			width: 210rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #9999FF;
			border-radius: 24rpx;
		}

		&_btn2 {
			width: 210rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #99CCFF;
			border-radius: 24rpx;
		}

		&_btn3 {
			width: 210rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #FFAA99;
			border-radius: 24rpx;
		}
	}
</style>